<script lang="ts">
  import DrawFlow from "$lib/components/draw/DrawFlow.svelte";
  import { SvelteFlowProvider } from "@xyflow/svelte";
  import { windowStore } from "../../store.svelte";
  import { page } from "$app/state";
  import { boardStore } from "../store.svelte";
  import { Info, ScanEye } from "lucide-svelte";
  import { get_draw, type DrawInfo } from "$lib/api/board/board_draw";
  import { request } from "$lib/utils/request";
  import { get_user_session } from "$lib/api/user";
  import ViewDrawPermModal from "$lib/components/modal/board/draw/ViewDrawPermModal.svelte";
  import { listen } from "@tauri-apps/api/event";
  import type { AllNotice } from "$lib/api/notice_type";
  import { getCurrentWindow } from "@tauri-apps/api/window";

  const drawId = page.url.searchParams.get("drawId") ?? "";
  windowStore.title = title;
  boardStore.initBoard();

  let drawInfo = $state(null as null | DrawInfo);
  let showPermModal = $state(false);

  async function loadDrawInfo() {
    const sessionId = await get_user_session();
    const res = await request(
      get_draw({
        session_id: sessionId,
        board_id: boardStore.boardId,
        draw_id: drawId,
      })
    );
    drawInfo = res.draw;
  }

  loadDrawInfo();

  $effect(() => {
    const unListen = listen<AllNotice>("notice", (ev) => {
      const payload = ev.payload;
      if (payload.BoardNotice != undefined) {
        if (
          payload.BoardNotice.UpdateDrawNotice != undefined &&
          payload.BoardNotice.UpdateDrawNotice.draw_id == drawId
        ) {
          loadDrawInfo();
        } else if (
          payload.BoardNotice.RemoveDrawNotice != undefined &&
          payload.BoardNotice.RemoveDrawNotice.draw_id == drawId
        ) {
          getCurrentWindow().close();
        }
      }
    });
    return () => {
      unListen.then((fn) => fn());
    };
  });
</script>

{#snippet title()}
  <div class="flex w-[calc(100vw-200px)] justify-between items-center">
    <div class="w-[350px] truncate flex gap-2">
      {boardStore.boardInfo?.basic_info.board_name ?? ""} / {drawInfo?.basic_info
        .draw_name ?? ""}
    </div>
    <div
      data-tauri-drag-region
      role="none"
      class="cursor-grab h-[50px] w-[calc(100vw-500px)]"
    ></div>
    <div class="w-[200px] flex gap-2 items-center">
      <div title="ctrl+鼠标左键可多选节点">
        <Info />
      </div>
      <button
        type="button"
        class="btn rounded-[10px]"
        title="查看权限"
        onclick={() => (showPermModal = true)}
      >
        <ScanEye />
      </button>
    </div>
  </div>
{/snippet}

<SvelteFlowProvider>
  {#if  boardStore.boardInfo != null && boardStore.myMember != null}
    <DrawFlow
      boardInfo={boardStore.boardInfo}
      myMember={boardStore.myMember}
      {drawId}
      heightClass="h-[calc(100vh-50px)]"
    />
  {/if}
</SvelteFlowProvider>

<div class="absolute -left-[10000px]">
  {#if drawInfo != null && showPermModal}
    <ViewDrawPermModal
      boardId={boardStore.boardId}
      {drawInfo}
      canEdit={boardStore?.myMember?.admin == true}
      onClose={() => (showPermModal = false)}
    />
  {/if}
</div>
